<template>
   <div>
       <div class="breadcrumb">
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <span>您当前的位置：</span>
          <el-breadcrumb-item :to="{ path: '/' }"><i>首页</i></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"><i>SEO设置</i></el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/' }"><i>首页SEO</i></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    
      <div class="Tform" style="font-size: 12px;">
        <el-form ref="form" :model="form" label-width="120px" >
          <div class="title">
              <span>首页SEO</span>
          </div>
          <div class="tit">
              <span>默认设置</span>
              <a>可使用：[prov]、[city]、[prov_or_city] 三种标签配合使用</a>
          </div>
          <el-form-item label="首页SEO标题">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="首页SEO关...">
              <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="form.desc"></el-input>
         </el-form-item>
         <div class="tit">
              <span>分站独立设置</span>
              <a>如需实现主站和分站首页SEO信息不一致，则需填写以下信息</a>
          </div>
          <div class="switch">
              <el-form-item label="是否开启">
                <el-switch v-model="form.delivery" @change="open"></el-switch>
              </el-form-item>
          </div>
           <div v-show="show" id="opshow">
             <el-form-item label="分站SEO标题">
                <el-input placeholder="SEO标题" v-model="form.desc"></el-input>
             </el-form-item>
             <el-form-item label="分站SEO关...">
                <el-input placeholder="SEO关键词" v-model="form.desc"></el-input>
             </el-form-item>
             <el-form-item label="分站SEO描述">
                <el-input type="textarea" placeholder="活动形式" v-model="form.desc"></el-input>
             </el-form-item>
           </div>
          <div class="tit">
              <span>主站默认显示地区</span>
              <a>如果设置则主站显示该地区独立内容</a>
          </div>
       
            <el-form-item label="选择地区"  prop="region">
                <el-select v-model="form.region" placeholder="不选择地区">
                <el-option label="不选择地区" value="none"></el-option>
                <el-option label="北京" value="beijing"></el-option>
                </el-select>
            </el-form-item>
          <div class="tit" style="padding:7px 18px">
               <span>附加设置</span>
          </div>
          <el-form-item label="关键词词头">
              <el-input placeholder="关键词词头" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="核心关键词">
              <el-input placeholder="核心关键词" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item label="长尾关键词">
              <el-input placeholder="长尾关键词" v-model="form.region"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary"  size="mini">提交</el-button>
            </el-form-item>
        </el-form>
      </div>
   </div>
   
</template>

<script>
export default {
  data() {
    return {
      swok: true,
      show: true,
      form: {
          name:'',
          region:'',
          desc:'',
          delivery: false,
        }
    };
  },
  methods: {
    open(){
        this.show = !this.show
    }
  },
};
</script>

<style scoped>
.demo-ruleForm {
  font-size: 12px;
}
.el-form-item {
  margin-bottom: 10px;
}
.tit {
  font-size: 14px;
  padding: 17px 18px;
  line-height: 1.4;
  background: #f5f6fa;
  margin: 0 0 20px 0;
  border: 1px solid #e1e6eb;
}
.tit span {
  margin: 0 20px 0 0;
}
.tit a {
  color: #999;
}
button {
  background: #0099cc;
  border-color: #0099cc;
}
.switch span {
  margin: 0 10px 0 30px;
}
.switch {
  padding: 0 0 10px 0;
}
</style>